<template>
	<view class="pk-modal" v-if="show">
		<u-modal v-model="show" width="100%" :showTitle="false" :mask-close-able="true" :show-confirm-button="false">
			<view class="content-box" @click.stop="handleCloseModal">

				<mBack ref="mBack" name="模式选择" @getGameResult="handleCloseModal"></mBack>
				<view class="mode-choose">
					<view class="top-box"></view>
					<view class="img-box">
						<scroll-view ref="scrollView" scroll-y class="scroll-content" :show-scrollbar="false"
							:scroll-with-animation="true">
							<view class="mode-item" v-for="(item, index) in modeList" :key="index"
								@click.stop="handleModeItemClick(index, item)">
								<image class="mode-item-image" :src="item.image" mode="aspectFill"></image>
								<view class="locked-masker" v-if="item.locked">
									<view class="masker-content">
										<view class="locked-tip-box">
											<image class="locked-icon"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/cb0549e505a44eb090baa6fd92db7792.png"
												mode=""></image>
											<view class="locked-tip-text">等级大于Lv.30可解锁</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

				<view class="ready-fight" @click.stop="handleReadyFight">
					<image class="ready-img"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8428eee891484097add0a91e100919c7.png"
						mode="aspectFill"></image>
					<view class="ready-text flex-row-center-center">我的卡组</view>
				</view>
				<view class="bottom-tip">
					<view class="left-point"></view>
					<view class="center-content">点击任意空白区域关闭</view>
					<view class="right-point"></view>
				</view>
			</view>

			<view class="mode-modal" v-if="showModeModel" @click="handleCloseModeModal">
				<view class="modal-content-box mode-modal-content flex-column-start-center" @click.stop>
					<view class="modal-title modal-transparent-title">
						<image class="image-title" :src="modeModalTitleImg" mode="aspectFill"></image>
						<view class="close-icon" @click="handleCloseModeModal">
							<image class="cover-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9cfc771011e642908073bd33850b419d.png"
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="modal-content flex-column-start-center">
						<!-- 挑战 -->
						<view class="dance-pk-box mode-modal-box-style flex-column-start-center"
							v-if="(actTabType=='pk'||actTabType=='season')&&(actModeType=='rank'||actModeType=='cRank')">
							<view class="pk-top-power flex-row-between-center">
								<view class="user-power-box flex-row-center-center">
									<view class="user-power-box-text flex-row-center-center">
										<text class="power-text-tip">舞力：</text>
										<text>3306</text>
									</view>
								</view>
								<view class="has-consume-thing-box flex-row-end-center">
									<view class="consume-thing flex-row-start-center">
										<image
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/01c70dbfd33c40789de56a47d5eb0e24.png"
											class="consume-thing-icon" mode="aspectFill"></image>
										<view class="consume-thing-num flex-row-center-center">20</view>
										<view class="consume-thing-add flex-row-center-center">
											<image
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png"
												class="cover-img" mode="aspectFill"></image>
										</view>
									</view>
								</view>
							</view>
							<view class="modal-center-scroll-list">
								<scroll-view ref="pk-scrollView" scroll-y class="scroll-content" :show-scrollbar="false"
									:scroll-with-animation="true">
									<view class="mode-modal-scroll-item item-bottom-line flex-row-center-center"
										v-for="(item,index) in pkList" :key="index">
										<view class="avatar-box flex-row-center-center">
											<view class="avatar-inner">
												<image class="cover-img avatar-img" :src="item.avatar"
													mode="aspectFill"></image>
											</view>
										</view>

										<view class="info-box flex-column-center-start">
											<view class="user-name info-box-item">{{item.userName}}</view>
											<view class="user-points info-box-item">积分：{{item.points}}</view>
											<view class="user-power info-box-item" v-if="actModeType=='rank'">
												舞力：{{item.dancePower}}</view>
										</view>
										<view class="rank-icon flex-row-center-center" v-if="actModeType=='cRank'">
											<view class="rank-icon-content">
												<image class="cover-img"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2df7380bed4d451a839f062bf7abbac9.png"
													mode="aspectFill"></image>
											</view>
											<view class="rank-icon-intro flex-column-center-start">
												<view class="rank-name">至尊</view>
												<view class="rank-starts flex-row-start-center">
													<image class="rank-starts-icon"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/040a9c3220e94deeb8558e385af16eb8.png"
														mode="aspectFill"></image>
													x198
												</view>

											</view>
										</view>

										<view class="rewards-box flex-row-start-center" v-if="actModeType!='cRank'">
											<view class="reward-item" v-for="(ritem,rindex) in tempRewardList"
												:key="rindex" :class="{
                      'green-good': ritem.RarityLevel == 1,
                      'orange-good': ritem.RarityLevel == 2,
                      'blue-good': ritem.RarityLevel == 3,
                      'purple-good': ritem.RarityLevel == 4,
                    }">
												<image class="cover-img" :src="ritem.icon" mode="aspectFill"></image>
												<view class="reward-num">{{ ritem.num }}</view>
											</view>
										</view>

										<view class="pk-btn-box flex-row-center-center">
											<view class="pk-btn flex-row-center-center" @click="handleRankGoPk">
												<image class="cover-img"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/49337456141a43568f423d689e541917.png"
													mode="aspectFill"></image>
											</view>
										</view>
									</view>

								</scroll-view>
							</view>
							<view class="mode-modal-bottom-btn-box flex-column-start-center">
								<view class="refresh-consume-box flex-row-center-center">
									<image class="consume-icon"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/eb5d7cac997f4eb5950dfadbf76813a0.png"
										mode="aspectFill"></image>
									<text class="nowCoins">1001</text>/
									<text>100</text>
								</view>

								<view class="btn-group flex-row-center-center">
									<view class="change-card-group" @click="handleChangeCardGroup">
										<image class="cover-img"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8428eee891484097add0a91e100919c7.png"
											mode="aspectFill"></image>
										<view class="change-card-group-text flex-row-center-center">
											<view class="grop-text-content">我的卡组</view>
										</view>
									</view>
									<view class="refresh-box flex-column-start-center">
										<view class="refresh-btn">
											<view class="btn-box">
												<view class="btn-item">
													<view class="btn-content start-live-btn"> 刷 新 </view>
												</view>
											</view>
										</view>
									</view>

									<view class="jump-pk flex-row-end-center" @click="handleJumpPkClick">
										<view class="check-box flex-row-center-center">
											<image class="cover-img" v-if="isFastPk"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/da3685993a7648459b4dac5039e04c66.png"
												mode="aspectFill"></image>
										</view>
										<view class="jump-tip flex-row-start-center">快速战斗</view>
									</view>
								</view>

							</view>

						</view>
						<!-- 地盘 -->
						<view class="dance-territory-box mode-modal-box-style flex-column-start-center"
							v-if="(actTabType=='territory'||actTabType=='mine')&&actModeType=='gt'">
							<view class="pk-top-power flex-row-between-center">
								<view class="user-power-box flex-row-center-center">
									<view class="user-power-box-text flex-row-center-center">
										<text class="power-text-tip">舞力：</text>
										<text>3306</text>
									</view>
								</view>
								<view class="has-consume-thing-box flex-row-end-center">
									<view class="consume-thing flex-row-start-center">
										<image
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/01c70dbfd33c40789de56a47d5eb0e24.png"
											class="consume-thing-icon" mode="aspectFill"></image>
										<view class="consume-thing-num flex-row-center-center">20</view>
										<view class="consume-thing-add flex-row-center-center">
											<image
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png"
												class="cover-img" mode="aspectFill"></image>
										</view>

									</view>
								</view>
							</view>
							<view class="mode-modal-table-title flex-row-start-center">
								<view class="territory-date sort-title-font-style flex-row-center-center"
									v-if="actTabType=='mine'">时间</view>
								<view class="territory-name sort-title-font-style flex-row-center-center">地盘</view>
								<view class="territory-level sort-title-font-style flex-row-center-center">级别</view>
								<view class="lord-info sort-title-font-style flex-row-center-center">领主</view>
								<view class="defense-times sort-title-font-style flex-row-center-center"
									v-if="actTabType=='territory'">防守</view>
								<view class="gt-btn sort-title-font-style flex-row-center-center">攻占</view>
							</view>

							<view class="territory-scroll" :class="{'no-padding-bottom':actTabType=='mine'}">
								<scroll-view ref="sort-scrollView" scroll-y class="scroll-content"
									:show-scrollbar="false" :scroll-with-animation="true">
									<view class="territory-item item-bottom-line flex-row-center-center"
										v-for="(item,index) in territoryList" :key="index">
										<view class="territory-date flex-row-center-center" v-if="actTabType=='mine'">
											{{beautifyTime(item.capTime,true)}}
										</view>
										<view class="territory-name  flex-row-center-center">
											<text class="territory-name-text">{{item.tName}}</text>
										</view>
										<view class="territory-level  flex-row-center-center">
											{{item.tLevel}}
										</view>
										<view class="lord-info  flex-row-center-center">
											<image class="avatar-img" v-if="item.lord&&item.lord.avatar"
												:src="item.lord.avatar" mode="aspectFill">
												<view class="lord-name-power flex-column-center-start">
													<view class="lord-name" v-if="item.lord&&item.lord.userName">
														{{item.lord.userName}}
													</view>
													<view class="dance-power flex-row-start-center">
														<image class="dance-power-icon"
															src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9d57ab450cd5421184078a4df091b28e.png"
															mode="aspectFill"></image>
														{{item.dancePower}}
													</view>
												</view>
										</view>
										<view class="defense-times  flex-row-center-center"
											v-if="actTabType=='territory'">
											{{item.defenseTimes}}次
										</view>
										<view class="gt-btn flex-row-center-center">
											<view class="gt-btn-box" @click="handleRankGoPk" v-if="!item.isMine">
												<image class="cover-img"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/49337456141a43568f423d689e541917.png"
													mode="aspectFill"></image>
											</view>

											<view class="btn-box flex-row-center-center"
												v-if="item.isMine&&actTabType=='mine'">
												<view class="btn-item">
													<view class="btn-content start-live-btn">领 取</view>
												</view>
											</view>



										</view>
									</view>
								</scroll-view>

							</view>



							<view class="mode-modal-bottom-btn-box flex-column-start-center"
								v-if="actTabType=='territory'">
								<view class="refresh-consume-box flex-row-center-center">
									<image class="consume-icon"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/eb5d7cac997f4eb5950dfadbf76813a0.png"
										mode="aspectFill"></image>
									<text class="nowCoins">1001</text>/
									<text>100</text>
								</view>

								<view class="btn-group flex-row-center-center">
									<view class="change-card-group" @click="handleChangeCardGroup">
										<image class="cover-img"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8428eee891484097add0a91e100919c7.png"
											mode="aspectFill"></image>
										<view class="change-card-group-text flex-row-center-center">
											<view class="grop-text-content">我的卡组</view>
										</view>
									</view>
									<view class="refresh-box flex-column-start-center">
										<view class="refresh-btn">
											<view class="btn-box">
												<view class="btn-item">
													<view class="btn-content start-live-btn"> 刷 新 </view>
												</view>
											</view>
										</view>
									</view>

									<view class="jump-pk flex-row-end-center" @click="handleJumpPkClick">
										<view class="check-box flex-row-center-center">
											<image class="cover-img" v-if="isFastPk"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/da3685993a7648459b4dac5039e04c66.png"
												mode="aspectFill"></image>
										</view>
										<view class="jump-tip flex-row-start-center">快速战斗</view>
									</view>
								</view>

							</view>

						</view>

						<!-- 排行 -->
						<view class="dance-sort-box modal-sort-box mode-modal-box-style flex-column-start-center"
							v-if="actTabType=='danceSort'&&(actModeType=='rank'||actModeType=='gt'||actModeType=='cRank')">
							<view class="modal-top-switch flex-row-center-center" v-if="actModeType=='cRank'">
								<view class="switch-tab-content flex-row-center-center">
									<view v-for="(item,index) in cRankSortTabs" :key="index"
										@click="handleSwitchTabClick(item,index)"
										class="switch-tab-item flex-row-center-center"
										:class="{'act-switch-tab-item':actcRankSortTab==item.type}">{{item.name}}
									</view>
								</view>

								<view class="switch-get-tip">
									<text v-if="actcRankSortTab=='now'">2024年12月01日~31日</text>
									<text v-if="actcRankSortTab=='prev'">2024年11月01日~30日</text>
								</view>
							</view>
							<view class="mode-modal-table-title flex-row-start-center" v-if="actModeType=='rank'">
								<!-- ||actModeType=='cRank' -->
								<view class="sort-number sort-title-font-style flex-row-center-center">排名</view>
								<view class="sort-user sort-title-font-style flex-row-center-center">玩家</view>
								<view class="rank-icon sort-title-font-style flex-row-center-center"
									v-if="actModeType=='cRank'">段位</view>
								<view class="sort-integral sort-title-font-style flex-row-center-center">积分</view>
								<view class="sort-bottom-line"></view>
							</view>
							<view class="mode-modal-table-title flex-row-start-center" v-if="actModeType=='gt'">
								<view class="sort-number sort-title-font-style flex-row-center-center">排名</view>
								<view class="sort-user sort-title-font-style flex-row-center-center">领主</view>
								<view class="sort-territory sort-title-font-style flex-row-center-center">地盘</view>
								<view class="sort-defense sort-title-font-style flex-row-center-center">防守</view>
								<view class="gt-btn sort-title-font-style flex-row-center-center">攻占</view>
								<view class="sort-bottom-line"></view>
							</view>
							<view class="dance-sort-scroll " :class="{'no-padding-bottom':actModeType=='gt'}">
								<scroll-view ref="sort-scrollView" scroll-y class="scroll-content"
									:show-scrollbar="false" :scroll-with-animation="true">
									<view class="dance-sort-item item-bottom-line flex-row-start-center"
										v-for="(item,index) in tempSortData" :key="index">
										<view class="sort-number flex-row-center-center">
											<text class="sort-number-text" v-if="index>2">{{index+1}}</text>
											<image class="sort-icon" v-else :src="sortIconSrc(index)" mode="aspectFill">
											</image>
										</view>
										<!-- 舞力全开相关 -->

										<view class="lord-info  flex-row-center-center">
											<image class="avatar-img" v-if="item.avatar" :src="item.avatar"
												mode="aspectFill">
												<view class="lord-name-power flex-column-center-start">
													<view class="lord-name" v-if="item.userName">
														{{item.userName}}
													</view>
													<view class="dance-power flex-row-start-center">
														<image class="dance-power-icon"
															src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9d57ab450cd5421184078a4df091b28e.png"
															mode="aspectFill"></image>
														{{item.dancePower}}
													</view>
												</view>
										</view>

										<view class="rank-icon flex-row-center-center" v-if="actModeType=='cRank'">
											<view class="rank-icon-content">
												<image class="cover-img"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2df7380bed4d451a839f062bf7abbac9.png"
													mode="aspectFill"></image>
											</view>
											<view class="rank-icon-intro flex-column-center-start">
												<view class="rank-name">至尊</view>
												<view class="rank-starts flex-row-start-center">
													<image class="rank-starts-icon"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/040a9c3220e94deeb8558e385af16eb8.png"
														mode="aspectFill"></image>
													x198
												</view>

											</view>
										</view>


										<view class="sort-integral flex-row-center-center"
											v-if="actModeType=='rank'||actModeType=='cRank'">
											<text class="sort-integral-text">{{item.dancePower}}</text>
										</view>
										<!-- 舞林争霸相关 -->

										<view class="sort-territory  flex-row-center-center" v-if="actModeType=='gt'">
											{{item.tName}}
										</view>
										<view class="sort-defense  flex-row-center-center" v-if="actModeType=='gt'">
											{{item.defenseTimes}}次
										</view>
										<view class="gt-btn  flex-row-center-center" v-if="actModeType=='gt'">
											<view class="gt-btn-box" @click="handleRankGoPk">
												<image class="cover-img"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/49337456141a43568f423d689e541917.png"
													mode="aspectFill"></image>
											</view>

										</view>
										<view class="sort-item-bottom-line"></view>
									</view>
								</scroll-view>
							</view>

							<view class="user-dance-sort-item flex-row-start-center"
								v-if="actModeType=='rank'||actModeType=='cRank'">
								<view class="sort-number flex-row-center-center">
									<text class="sort-number-text">未上榜</text>
								</view>

								<!--  -->

								<view class="lord-info  flex-row-center-center"
									v-if="actModeType=='rank'||actModeType=='cRank'">
									<image class="avatar-img" v-if="userSortData.avatar" :src="userSortData.avatar"
										mode="aspectFill">
										<view class="lord-name-power flex-column-center-start">
											<view class="lord-name" v-if="userSortData.userName">
												{{userSortData.userName}}
											</view>
											<view class="dance-power flex-row-start-center">
												<image class="dance-power-icon"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9d57ab450cd5421184078a4df091b28e.png"
													mode="aspectFill"></image>
												{{userSortData.dancePower}}
											</view>
										</view>
								</view>


								<view class="rank-icon flex-row-center-center" v-if="actModeType=='cRank'">
									<view class="rank-icon-content">
										<image class="cover-img"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2df7380bed4d451a839f062bf7abbac9.png"
											mode="aspectFill"></image>
									</view>
									<view class="rank-icon-intro flex-column-center-start">
										<view class="rank-name">至尊</view>
										<view class="rank-starts flex-row-start-center">
											<image class="rank-starts-icon"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/040a9c3220e94deeb8558e385af16eb8.png"
												mode="aspectFill"></image>
											x198
										</view>

									</view>
								</view>





								<view class="sort-integral flex-row-center-center"
									v-if="actModeType=='rank'||actModeType=='cRank'">
									<text class="sort-integral-text">{{userSortData.dancePower}}</text>
								</view>





							</view>
						</view>


						<!-- 日志 -->
						<view class="dance-log-box mode-modal-box-style flex-column-start-center"
							v-if="actTabType=='log'&&(actModeType=='rank'||actModeType=='gt'||actModeType=='cRank')">
							<view class="pk-top-power flex-row-between-center">
								<view class="user-power-box flex-row-center-center">
									<view class="user-power-box-text flex-row-center-center">
										<text class="power-text-tip">舞力：</text>
										<text>3306</text>
									</view>
								</view>
								<view class="has-consume-thing-box flex-row-end-center">
									<view class="consume-thing flex-row-start-center">
										<image
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/01c70dbfd33c40789de56a47d5eb0e24.png"
											class="consume-thing-icon" mode="aspectFill"></image>
										<view class="consume-thing-num flex-row-center-center">20</view>
										<view class="consume-thing-add flex-row-center-center">
											<image
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png"
												class="cover-img" mode="aspectFill"></image>
										</view>

									</view>
								</view>
							</view>
							<view class="modal-center-scroll-list">
								<scroll-view ref="log-scrollView" scroll-y class="scroll-content"
									:show-scrollbar="false" :scroll-with-animation="true">
									<!-- item-bottom-line -->
									<view
										class="log-item mode-modal-scroll-item  flex-row-center-center item-bottom-line"
										v-for="(item,index) in logList" :key="index">
										<view class="avatar-box flex-row-center-center">
											<view class="avatar-inner">
												<image class="cover-img avatar-img" :src="item.avatar"
													mode="aspectFill"></image>
											</view>
										</view>
										<view class="info-box flex-column-start-start">
											<view class="info-row-content flex-row-start-center">
												<view class="log-info-item flex-row-start-center">
													{{item.userName}}
												</view>
												<view class="log-info-item flex-row-center-center">
													<image class="dance-power-icon"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9d57ab450cd5421184078a4df091b28e.png"
														mode="aspectFill"></image>
													{{item.dancePower}}
												</view>
												<view class="log-info-item flex-row-center-center">
													<image class="log-result-icon" v-if="item.pointsChange<=0"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/74db60ca84c5435589f62c1d5512a4b0.png"
														mode="aspectFill"></image>
													<image class="log-result-icon" v-else
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f0b44017c4b044f5a15eb9df8cdb8b50.png"
														mode="aspectFill"></image>
												</view>
											</view>
											<view class="info-row-content flex-row-start-center">
												<view class="log-info-item flex-row-start-center">
													<text
														:class="{'add-points':item.pointsChange>0,'sub-points':item.pointsChange<=0}">
														积分
														<text v-if="item.pointsChange>0">+</text>
														{{item.pointsChange}}</text>
												</view>
												<view class="log-info-item flex-row-center-center">
													{{beautifyTime(item.createTime,true)}}
												</view>
												<view class="log-info-item flex-row-center-center">
													<text v-if="item.logType=='defense'"
														class="log-type-text defense-text">防守</text>
													<text v-if="item.logType=='challenge'"
														class="log-type-text challenge-text">挑战</text>
												</view>
											</view>

											<!-- <view class="log-info-center-line"></view> -->

										</view>
										<view class="pk-btn-box flex-row-center-center">
											<view class="pk-btn flex-row-center-center" @click="handleRankGoPk"
												v-if="item.pointsChange<=0">
												<image class="cover-img"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/49337456141a43568f423d689e541917.png"
													mode="aspectFill"></image>
												<view class="pk-btn-text">复仇</view>
											</view>
										</view>


									</view>

								</scroll-view>
							</view>
							<view class="log-bottom-btn-box mode-modal-bottom-btn-box flex-column-start-center">
								<view class="btn-group flex-row-start-center">
									<view class="change-card-group" @click="handleChangeCardGroup">
										<image class="cover-img"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8428eee891484097add0a91e100919c7.png"
											mode="aspectFill"></image>
										<view class="change-card-group-text flex-row-center-center">
											<view class="grop-text-content">我的卡组</view>
										</view>
									</view>

								</view>
							</view>

						</view>

						<!-- 奖励 -->
						<view class="dance-reward-box modal-reward-box mode-modal-box-style flex-column-start-center"
							v-if="actTabType=='reward'&&(actModeType=='rank'||actModeType=='gt'||actModeType=='cRank')">
							<view class="modal-top-switch flex-row-center-center" v-if="actModeType=='rank'">
								<view class="switch-tab-content flex-row-center-center">
									<view v-for="(item,index) in rankRewardTabs" :key="index"
										@click="handleSwitchTabClick(item,index)"
										class="switch-tab-item flex-row-center-center"
										:class="{'act-switch-tab-item':actRankRewardTab==item.type}">{{item.name}}
									</view>
								</view>

								<view class="switch-get-tip">
									<text v-if="actRankRewardTab=='day'">每日零点发放和刷新奖励</text>
									<text v-if="actRankRewardTab=='week'">每周一零点发放和刷新奖励</text>
								</view>
							</view>
							<view class="modal-center-scroll-list reward-scroll-list" v-if="actModeType=='rank'">
								<scroll-view ref="pk-scrollView" scroll-y class="scroll-content" :show-scrollbar="false"
									:scroll-with-animation="true">
									<view class="mode-modal-scroll-item item-bottom-line flex-row-start-center"
										v-for="(item,index) in pkList" :key="index">
										<view class="reward-sort-name flex-row-center-center">
											<text class="sort-number-text" v-if="index>2">{{index+1}}</text>
											<image class="sort-icon" v-else :src="sortIconSrc(index)" mode="aspectFill">
											</image>
										</view>

										<view class="rewards-box dance-reward-rewards-box flex-row-start-center">
											<view class="reward-item" v-for="(ritem,rindex) in tempTimeRewardList"
												:key="rindex" :class="{
							  'green-good': ritem.RarityLevel == 1,
							  'orange-good': ritem.RarityLevel == 2,
							  'blue-good': ritem.RarityLevel == 3,
							  'purple-good': ritem.RarityLevel == 4,
							}">
												<image class="cover-img" :src="ritem.icon" mode="aspectFill"></image>
												<view class="reward-num">{{ ritem.num }}</view>
											</view>
										</view>

									</view>

								</scroll-view>
							</view>


							<view class="user-reward-sort-item flex-row-start-center" v-if="actModeType=='rank'">
								<view class="reward-sort-name flex-row-center-center">
									<text class="sort-number-text"
										v-if="rankUserTimeReward.sortNum>2">{{rankUserTimeReward.sortNum}}</text>
									<image class="sort-icon" v-else :src="sortIconSrc(rankUserTimeReward.sortNum-1)"
										mode="aspectFill">
									</image>
								</view>

								<view class="rewards-box dance-reward-rewards-box flex-row-start-center">
									<view class="reward-item" v-for="(ritem,rindex) in tempTimeRewardList" :key="rindex"
										:class="{
								  'green-good': ritem.RarityLevel == 1,
								  'orange-good': ritem.RarityLevel == 2,
								  'blue-good': ritem.RarityLevel == 3,
								  'purple-good': ritem.RarityLevel == 4,
								}">
										<image class="cover-img" :src="ritem.icon" mode="aspectFill"></image>
										<view class="reward-num">{{ ritem.num }}</view>
									</view>
								</view>

								<view class="user-reward-sort-btn flex-row-center-center">
									<view class="btn-box">
										<view class="btn-item">
											<view class="btn-content start-live-btn">领 取</view>
										</view>
									</view>
								</view>
							</view>

							<!-- 舞林争霸 -->
							<view class="mode-modal-table-title flex-row-start-center" v-if="actModeType=='gt'">
								<view class="territory-level sort-title-font-style flex-row-center-center">级别</view>
								<view class="territory-reward sort-title-font-style flex-row-center-center">奖励</view>
								<view class="territory-bonus sort-title-font-style flex-row-center-center">加成</view>
							</view>
							<view class="mode-modal-table-title flex-row-start-center" v-if="actModeType=='cRank'">
								<view class="cRank-integral sort-title-font-style flex-row-center-center">积分</view>
								<view class="cRank-rank sort-title-font-style flex-row-center-center">段位</view>
							</view>

							<view class="modal-center-scroll-list" v-if="actModeType=='gt'">
								<view class="mode-modal-scroll-item item-bottom-line flex-row-center-center"
									v-for="(item,index) in introRewardList" :key="index">
									<view class="territory-level  flex-row-center-center">
										<text class="modal-item-text">{{item.tLevel}}</text>
									</view>
									<view class="rewards-box dance-reward-rewards-box flex-row-start-center">
										<view class="reward-item" v-for="(ritem,rindex) in tempTimeRewardList"
											:key="rindex" :class="{
									  'green-good': ritem.RarityLevel == 1,
									  'orange-good': ritem.RarityLevel == 2,
									  'blue-good': ritem.RarityLevel == 3,
									  'purple-good': ritem.RarityLevel == 4,
									}">
											<image class="cover-img" :src="ritem.icon" mode="aspectFill"></image>
											<view class="reward-num">{{ ritem.num }}</view>
										</view>
									</view>
									<view class="territory-bonus flex-row-center-center">
										<text class="modal-item-text">{{item.bonus}}</text>
									</view>





								</view>









								<view class="gt-reward-intro" v-if="actModeType=='gt'">
									<view class="gt-reward-intro-row">
										奖励说明：
									</view>
									<view class="gt-reward-intro-row">
										1、只要你的领地被挑战过一次，就可以领取每日奖励。
									</view>
									<view class="gt-reward-intro-row">
										2、每日领地防守次数超过20次，奖励翻倍。
									</view>
									<view class="gt-reward-intro-row">
										3、每日零点可以领取当日奖励。
									</view>
									<view class="gt-reward-intro-row">
										4、失去领地时自动领取当日未领奖励。
									</view>
								</view>
							</view>




							<view class="modal-center-scroll-list" v-if="actModeType=='cRank'">
								<view class="mode-modal-scroll-item item-bottom-line flex-row-center-center"
									v-for="(item,index) in rankTypeList" :key="index">
									<view class="cRank-integral flex-row-center-center modal-item-text">
										{{item.pointsRange}}
									</view>
									<view class="cRank-rank flex-row-center-center">
										<view class="rank-icon flex-row-center-center">
											<view class="rank-icon-content">
												<image class="cover-img" :src="item.image" mode="aspectFill"></image>
											</view>
											<view class="rank-icon-intro flex-column-center-start">
												<view class="rank-name" style="margin-bottom: 0rpx;">{{item.name}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>

					</view>
					<view class="bottom-mode-tab flex-row-start-center">
						<view class="tab-item flex-row-center-center"
							:class="{'act-tab-item':actTabType==item.type,'last-tab-item':index==tabs.length-1,'empty-tab':item.isEmpty}"
							v-for="(item,index) in tabs" :key="index" @click="handleModeModalTabClick(item,index)">
							{{item.name}}
						</view>
						<view class="modal-bottom-tab-line"></view>
					</view>


				</view>

				<view class="bottom-tip">
					<view class="left-point"></view>
					<view class="center-content">点击任意空白区域关闭</view>
					<view class="right-point"></view>
				</view>

			</view>
			<view class="battleSetting-modal">
				<battleSetting ref="battleSetting" :needStartGame="false"></battleSetting>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import battleSetting from "@/components/battle-setting/index.vue";
	import mBack from "@/components/m-back/index.vue";
	import {
		beautifyTime
	} from "@/utils/filters.js";
	export default {
		components: {
			battleSetting,
			mBack,
		},
		computed: {
			modeModalTitleImg() {
				let actModeType = this.actModeType
				switch (actModeType) {
					case 'rank':
						return "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/4ec73c62f84a4a9fba4aaae8cfe35287.png"
						break;
					case 'gt':
						return "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b725cacd2eb2439a9da9c22854d1f4da.png"
						break;
					case 'cRank':
						return "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/73ca7b93cf7144348853019b133bfd71.png"
						break;

					default:
						break;
				}

			},
			tabs() {
				let actModeType = this.actModeType
				switch (actModeType) {
					case 'cRank':
						return this.cRankTabs
						break;
					case 'gt':
						return this.gtTabs
						break;
					case 'rank':
						return this.rankTabs
						break;
					default:
						break;
				}
			}

		},
		data() {
			return {
				actTabType: 'reward',
				actModeType: 'cRank',
				showModeModel: false,
				show: false,
				isFastPk: true,
				actRankRewardTab: 'day',
				actcRankSortTab: 'now',
				rankUserTimeReward: {
					sortNum: 100,
				},
				cRankSortTabs: [{
						name: "当前赛季",
						type: "now"
					},
					{
						name: "上一赛季",
						type: "prev"
					},
				],
				rankRewardTabs: [{
						name: "每日奖励",
						type: "day"
					},
					{
						name: "每周奖励",
						type: "week"
					},

				],
				territoryList: [{
						tName: "沈阳",
						tLevel: "一级",
						lord: {
							avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/00207b5448134a3e851925c885076eda.jpg",
							honer: "新星总裁10阶",
							userName: "第一收割机"
						},
						defenseTimes: 1,
						dancePower: 777,
						capTime: 1734063426000,
						isMine: true
					},
					{
						tName: "北京",
						tLevel: "一级",
						lord: {
							avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ba2d021614e74972b9ded8202ceb70bb.jpg",
							honer: "新星总裁10阶",
							userName: "黄晓明"
						},
						defenseTimes: 1,
						dancePower: 998,
						capTime: 1734063426000
					},
					{
						tName: "上海",
						tLevel: "一级",
						lord: {
							avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/87f1e76fd3814f72a2313320a64cd8fd.jpg",
							honer: "新星总裁10阶",
							userName: "彭于晏"
						},
						defenseTimes: 8,
						dancePower: 888,
						capTime: 1734063426000
					},
					{
						tName: "深圳",
						tLevel: "一级",
						lord: {
							avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bcbeea5e32334d6ca3612711f9b4c469.png",
							honer: "新星总裁10阶",
							userName: "刘德华"
						},
						defenseTimes: 10,
						dancePower: 996,
						capTime: 1734063426000
					},
					{
						tName: "广州",
						tLevel: "一级",
						lord: {
							avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/70656fad038c4d08b5237c18e331716d.jpg",
							honer: "新星总裁10阶",
							userName: "周润发"
						},
						defenseTimes: 11,
						dancePower: 995,
						capTime: 1734063426000
					},
					{
						tName: "成都",
						tLevel: "一级",
						lord: {
							avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8417b39cbde142cfb2a6afbc8e8b8136.jpg",
							honer: "新星总裁10阶",
							userName: "蔡徐坤"
						},
						defenseTimes: 6,
						dancePower: 899,
						capTime: 1734063426000
					},
					{
						tName: "杭州",
						tLevel: "一级",
						lord: {
							avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/40c5ac2338de48688d4b4c2924a42483.jpg",
							honer: "新星总裁10阶",
							userName: "古天乐"
						},
						defenseTimes: 9,
						dancePower: 990,
						capTime: 1734063426000
					},

					{
						tName: "杭州",
						tLevel: "一级",
						lord: {
							avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/40c5ac2338de48688d4b4c2924a42483.jpg",
							honer: "新星总裁10阶",
							userName: "古天乐"
						},
						defenseTimes: 9,
						dancePower: 990,
						capTime: 1734063426000
					},
					{
						tName: "杭州",
						tLevel: "一级",
						lord: {
							avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/40c5ac2338de48688d4b4c2924a42483.jpg",
							honer: "新星总裁10阶",
							userName: "古天乐"
						},
						defenseTimes: 9,
						dancePower: 990,
						capTime: 1733894166000
					},

				],
				rankTypeList: [{
						name: "青铜",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/de73d494c7f74414b286d6a0c9af80f5.png",
						level: 1,
						pointsRange: "1000~1500",
					},
					{
						name: "白银",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/4f0672107a6a4bf7b8953be07ab21104.png",
						level: 2,
						pointsRange: "1501~2000",
					},
					{
						name: "黄金",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a752ad6d9d0c467db4bd917ac4323f7d.png",
						level: 3,
						pointsRange: "2001~2500",
					},
					{
						name: "铂金",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/267a659d786c4c1e9ddcc1baa1b66f70.png",
						level: 4,
						pointsRange: "2501~3000",
					},
					{
						name: "星钻",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c023b0a1083f4ef39a94ff32dc795fe9.png",
						level: 5,
						pointsRange: "3001~3500",
					},
					{
						name: "至尊",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2df7380bed4d451a839f062bf7abbac9.png",
						level: 6,
						pointsRange: "3501~4000",
					},
				],
				introRewardList: [{
						tLevel: "一级",
						rewardList: [],
						bonus: '80%',


					},
					{
						tLevel: "二级",
						rewardList: [],
						bonus: '60%',

					},
					{
						tLevel: "三级",
						rewardList: [],
						bonus: '40%',

					},
					{
						tLevel: "四级",
						rewardList: [],
						bonus: '20%',

					},
				],
				tempTimeRewardList: [{
						name: "金币",
						type: "prop",
						num: 3,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/531cc17604ec435286166761419a50e2.png",
						RarityLevel: 4
					},
					{
						name: "以太币",
						type: "prop",
						num: 2000,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/178967f2db9e4b21b9250c0c4ba950ad.png",
						RarityLevel: 3
					},
					{
						name: "以太币",
						type: "prop",
						num: 2000,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6035c864cda949ceaa64ec009d3fcdc9.png",
						RarityLevel: 2
					},

				],
				tempRewardList: [{
						name: "金币",
						type: "prop",
						num: 3,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/531cc17604ec435286166761419a50e2.png",
						RarityLevel: 4
					},
					{
						name: "以太币",
						type: "prop",
						num: 2000,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/178967f2db9e4b21b9250c0c4ba950ad.png",
						RarityLevel: 3
					},

				],
				logList: [{
						userName: "黄晓明",
						dancePower: 991,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ba2d021614e74972b9ded8202ceb70bb.jpg",
						pointsChange: -7,
						logType: "defense", //challenge   defense
						createTime: 1733897724000
					},
					{
						userName: "谢霆锋",
						dancePower: 991,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ddeefb36036d4c2c9a4424d34a35bcc4.jpg",
						pointsChange: 15,
						logType: "challenge",
						createTime: 1733804124000
					},
					{
						userName: "周润发",
						dancePower: 991,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/70656fad038c4d08b5237c18e331716d.jpg",
						pointsChange: 0,
						logType: "challenge",
						createTime: 1733696124000
					},

				],
				pkList: [{
						userName: "刘德华",
						level: 30,
						dancePower: 993,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bcbeea5e32334d6ca3612711f9b4c469.png",
						points: 1043
					},
					{
						userName: "彭于晏",
						level: 30,
						dancePower: 992,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/87f1e76fd3814f72a2313320a64cd8fd.jpg",
						points: 1000
					},
					{
						userName: "陈冠希",
						level: 30,
						dancePower: 991,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c7535585feae47828cc4a0ecc090e173.jpg",
						points: 999
					},
					{
						userName: "黎明",
						level: 30,
						dancePower: 991,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7afc8847ca0f4f85948ab41edbba6a4c.jpg",
						points: 997
					},
					{
						userName: "古天乐",
						level: 30,
						dancePower: 991,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/40c5ac2338de48688d4b4c2924a42483.jpg",
						points: 885
					},
					{
						userName: "古巨基",
						level: 30,
						dancePower: 991,

						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1ba6e8e5d3f140009900e5eaa23f45ad.jpg",
						points: 883
					},
					{
						userName: "张家辉",
						level: 30,
						dancePower: 991,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/27819e20465747d58d5e38d4e38aa58a.jpg",
						points: 880
					},
					{
						userName: "黄晓明",
						level: 30,
						dancePower: 991,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ba2d021614e74972b9ded8202ceb70bb.jpg",
						points: 850
					},
					{
						userName: "谢霆锋",
						level: 30,
						dancePower: 991,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ddeefb36036d4c2c9a4424d34a35bcc4.jpg",
						points: 800
					},
					{
						userName: "周润发",
						level: 30,
						dancePower: 991,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/70656fad038c4d08b5237c18e331716d.jpg",
						points: 790
					},

				],
				userSortData: {
					userName: "第一收割机",
					level: 30,
					dancePower: 777,
					popularity: 888,
					Beckoning: 777,
					avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/00207b5448134a3e851925c885076eda.jpg",
					honer: "新星总裁10阶",
					honerLevel: 3,
					tName: "沈阳",
					defenseTimes: 1,
					tLevel: "一级"
				},
				sortIconList: [
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ddd87efc45494316a7ef10612b4aac1b.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d16850e51b384f81b06d0f4311d77f25.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d7548cc3949446e4ac0820e0242f6059.png",
				],
				honerLevelList: [{
						level: 1,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5e28d6491f1345ddbc8d800e5eec7704.png",
					},
					{
						level: 2,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/eb73126fc164412ba60a9864c5fe8a3c.png",
					},
					{
						level: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/91c2b62b682349b291c40e3e41c71337.png",
					},
					{
						level: 4,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/efd29e54207e44d7851bdcb05a999daf.png",
					},
					{
						level: 5,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/eedb0f12575145be99e4340fdb78f30a.png",
					},
					{
						level: 6,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c038fdc7fa044c18c71b01d619be6a3.png",
					},
				],
				tempSortData: [{
						userName: "西门大官人",
						level: 30,
						dancePower: 993,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8e8d014dcfce4e85bee7fe6d5911ca0a.jpg",
						honer: "新星总裁10阶",
						honerLevel: 6,
						tName: "北京",
						defenseTimes: 11,
					},
					{
						userName: "二号玩家",
						level: 30,
						dancePower: 992,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/MEMBER/1751587426788548608//1f0da7d80eea4d58bfda51ee8012900c.jpg",
						honer: "新星总裁10阶",
						honerLevel: 6,
						tName: "上海",
						defenseTimes: 10,
					},
					{
						userName: "三号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/MEMBER/1751587426788548608//432d50b16c1b4ec7845c31ebb31d1331.jpg",
						honer: "新星总裁10阶",
						honerLevel: 6,
						tName: "广州",
						defenseTimes: 9,
					},
					{
						userName: "四号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/game/image/8f55e1de60aa46f881aeaab72dac1c1d.png",
						honer: "新星总裁10阶",
						honerLevel: 5,
						tName: "重庆",
						defenseTimes: 8,
					},
					{
						userName: "五号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/game/image/90865d05e47447ce9d17fc0074e79be6.png",
						honer: "新星总裁10阶",
						honerLevel: 5,
						tName: "台北",
						defenseTimes: 7,
					},
					{
						userName: "六号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/game/image/62330d28cdd44003bc5665f9afb4af3b.jpg",
						honer: "新星总裁10阶",
						honerLevel: 5,
						tName: "南京",
						defenseTimes: 8,
					},
					{
						userName: "七号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 4,
						tName: "天津",
						defenseTimes: 8,
					},
					{
						userName: "八号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 4,
						tName: "杭州",
						defenseTimes: 9,
					},
					{
						userName: "九号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 4,
						tName: "贵阳",
						defenseTimes: 11,
					},
					{
						userName: "十号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 3,
						tName: "昆明",
						defenseTimes: 10,
					},
					{
						userName: "十一号玩家家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 3,
						tName: "石家庄",
						defenseTimes: 10,
					},
					{
						userName: "十一号玩家家家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 3,
						tName: "郑州",
						defenseTimes: 11,
					},
					{
						userName: "十一号玩家家家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 3,
						tName: "太原",
						defenseTimes: 9,
					}
				],
				rankTabs: [{
						name: "挑战",
						type: 'pk'
					}, {
						name: "排行",
						type: 'danceSort'
					},

					{
						name: "奖励",
						type: 'reward'
					},
					{
						name: "记录",
						type: 'log'
					},
				],
				gtTabs: [{
						name: "地盘",
						type: 'territory',
						isEmpty: false
					},
					{
						name: "排行",
						type: 'danceSort',
						isEmpty: false
					},
					{
						name: "奖励",
						type: 'reward',
						isEmpty: false
					},
					{
						name: "记录",
						type: 'mine',
						isEmpty: false
					},
				],
				cRankTabs: [{
						name: "赛季",
						type: 'season',
						isEmpty: false
					},
					{
						name: "排行",
						type: 'danceSort',
						isEmpty: false
					},
					{
						name: "规则",
						type: 'reward',
						isEmpty: false
					},
					{
						name: "记录",
						type: 'log',
						isEmpty: false
					},
				],
				backName: "",
				modeList: [{
						name: "舞力全开",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/506299fe31464fef8d1d815e09ab465e.png",
						locked: false,
						type: "rank",
					},
					{
						name: "舞林争霸",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ddc26043722c4c5081348382421f42be.png",
						locked: false,
						type: "gt",
					},
					{
						name: "舞林大会",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/fc9bdd005bba49ee84f45525801e1434.png",
						locked: false,
						type: "cRank",
					},
				],
			};
		},
		methods: {
			beautifyTime,
			handleSwitchTabClick(item, index) {
				if (this.actModeType == 'rank') {
					this.actRankRewardTab = item.type
				} else {
					this.actcRankSortTab = item.type
				}
			},
			handleRankGoPk() {
				console.log("点击");
				this.$emit('modalResult', {
					type: this.actModeType,
					storyId: 'S013LUL'
				})
			},
			handleChangeCardGroup() {
				this.$refs.battleSetting.open();
			},
			handleJumpPkClick() {
				this.isFastPk = !this.isFastPk
			},
			honerLevelFilter(value) {
				let resArr = this.honerLevelList.filter((item, index) => {
					return item.level == value;
				});
				return resArr.length ? resArr[0].image : "";
			},
			sortIconSrc(index) {
				return this.sortIconList[index];
			},
			handleModeModalTabClick(item, index) {
				if (item.isEmpty) {
					return
				}
				this.actTabType = item.type

			},
			handleOpenModeModal() {
				this.showModeModel = true
			},
			handleCloseModeModal() {
				this.showModeModel = false
			},
			handleModeItemClick(index, item) {
				if (item.locked) {
					return
				}
				this.actModeType = item.type

				if (item.type == 'rank') {
					this.actTabType = 'pk'
				} else if (item.type == 'gt') {
					this.actTabType = 'territory'
				} else {
					this.actTabType = 'season'
				}


				this.handleOpenModeModal()

			},
			handleReadyFight() {
				this.$refs.battleSetting.open();
			},

			handleCloseModal() {
				this.show = false;

			},
			open(backName) {
				this.backName = !backName ? "" : backName;
				this.show = true;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pk-modal {
		pointer-events: fill;
	}

	.content-box {
		position: relative;
		box-shadow: 0rpx 8rpx 40rpx -2rpx rgba(0, 0, 0, 0);
		border-radius: 12rpx;
		width: 100vw;
		height: 100vh;
		background-color: rgba(255, 255, 255, 0);
		backdrop-filter: blur(15rpx);

		.battleSetting-modal {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			z-index: 9;
		}

		.ready-fight {
			position: absolute;
			bottom: 220rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 55rpx;
			height: 55rpx;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, 0.4);
			margin-right: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.ready-img {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}

			.ready-text {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -25rpx;
				width: 150rpx;

				font-size: 20rpx;
				line-height: 20rpx;
				text-align: center;
				text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, 0.3);
				color: #fff;
			}
		}

		.mode-choose {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			.top-box {
				height: 170rpx;
				width: 100%;
			}

			.img-box {
				flex: 1;
				width: 100%;
				box-sizing: border-box;

				.scroll-content {
					width: 100%;
					height: 100%;
					overflow: hidden;
					box-sizing: border-box;

					.mode-item {
						position: relative;
						width: 100%;
						height: 280rpx;
						margin-bottom: 20rpx;
						box-sizing: border-box;
						padding: 0rpx 20rpx;

						&:first-child {
							margin-top: 20rpx;
						}

						.mode-item-image {
							width: 100%;
							height: 100%;
							box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.6);
						}

						.locked-masker {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 100%;
							height: 100%;
							z-index: 3;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							box-sizing: border-box;
							padding: 0rpx 20rpx;

							.masker-content {
								position: relative;
								width: 100%;
								height: 100%;
								background-color: rgba(0, 0, 0, 0.6);
							}

							.locked-tip-box {
								position: absolute;
								left: 0rpx;
								bottom: 10rpx;
								width: 100%;
								height: 50rpx;
								display: flex;
								justify-content: flex-start;
								align-items: center;

								.locked-icon {
									width: 35rpx;
									height: 35rpx;
									object-fit: cover;
									margin-left: 20rpx;
									margin-right: 10rpx;
								}

								.locked-tip-text {
									// width: 100%;
									flex: 1;
									height: 30rpx;
									font-size: 20rpx;
									line-height: 30rpx;
									color: #fff;
									text-align: left;
								}
							}

							.masker-img {
								width: 50rpx;
								height: 50rpx;
								object-fit: cover;
							}

							.tip-text {
								width: 100%;
								height: 30rpx;
								font-size: 20rpx;
								line-height: 30rpx;
								color: #fff;
								text-align: center;
								margin-top: 10rpx;
							}
						}
					}
				}
			}
		}





	}








	.dance-territory-box {
		.territory-scroll {
			position: relative;
			flex: 1;
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
			margin-bottom: 10rpx;
		}

		.territory-item {
			position: relative;
			width: 100%;
			height: 100rpx;

			font-size: 24rpx;
			line-height: 24rpx;
			color: #5e5c5d;
		}

		.territory-name {
			width: 150rpx;
			height: 100%;

			.territory-name-text {}
		}

		.territory-level {
			width: 100rpx;
			height: 100%;
		}

		.defense-times {
			width: 100rpx;
			height: 100%;
		}

		.territory-date {
			width: 80rpx;
			height: 100%;
		}


	}












	.pk-top-power {
		width: 100%;
		height: 80rpx;

		.user-power-box {
			// width: 200rpx;
			height: 100%;
			font-size: 24rpx;
			line-height: 24rpx;
			color: #fff;

			.user-power-box-text {
				position: relative;
				padding: 0rpx 50rpx;
				height: 40rpx;
				background-image: linear-gradient(to right, rgba(213, 80, 61, 0)0%, rgba(213, 80, 61, .8)30%, rgba(221, 124, 61, .8)70%, rgba(213, 80, 61, 0)100%);

				&::after {
					content: "";
					position: absolute;
					left: 0rpx;
					width: 100%;
					height: 1rpx;
					background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%);
					opacity: 0.4;
					top: 0rpx;
				}

				&::before {
					content: "";
					position: absolute;
					left: 0rpx;
					width: 100%;
					height: 1rpx;
					background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%);
					opacity: 0.4;
					bottom: 0rpx;
				}

				.power-text-tip {
					color: #f3e9b4;
				}
			}

		}


	}






	.hide-content {
		opacity: 0;
	}

	.dance-reward-rewards-box {
		flex: 1;
	}




	.mode-modal-bottom-btn-box {
		position: relative;
		width: 100%;
		height: 110rpx;

		.refresh-consume-box {
			font-size: 20rpx;
			line-height: 20rpx;
			color: #41a863;

			.consume-icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}

		.btn-group {
			position: relative;
			width: 100%;
			margin-top: 10rpx;
		}

		.change-card-group {
			position: absolute;
			left: 10rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			box-shadow: inset 0rpx 0rpx 15rpx rgba(255, 255, 255, .8);
			// overflow: hidden;
			padding: 8rpx;

			.change-card-group-text {
				position: absolute;
				left: 50%;

				bottom: 0rpx;
				transform: translateX(-50%);
				width: 80rpx;
				font-size: 12rpx;
				line-height: 12rpx;
				text-align: center;
				color: #5e5c5d;
				text-shadow: 0rpx 0rpx 2rpx rgba(255, 255, 255, .3);

				.grop-text-content {}

			}
		}

		.refresh-box {
			width: 150rpx;
			height: 100%;

			.refresh-btn {
				.btn-box {
					margin-top: 0rpx;
					margin-bottom: 0rpx;
				}
			}
		}

		.jump-pk {
			position: absolute;
			right: 0rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 200rpx;
			height: 30rpx;

			.check-box {
				width: 30rpx;
				height: 30rpx;
				background-color: rgba(255, 255, 255, .3);
				// box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
				margin-right: 10rpx;
				box-sizing: border-box;
				padding: 5rpx;
			}

			.jump-tip {
				height: 30rpx;
				font-size: 20rpx;
				line-height: 30rpx;
				color: #5e5c5d;
				text-shadow: 0rpx 0rpx 2rpx rgba(255, 255, 255, .3);
			}
		}
	}


	.dance-log-box {
		.log-item {
			margin-bottom: 10rpx;

			.info-box {
				flex: 1;

			}
		}

		.log-center-scroll-list {}

		.log-bottom-btn-box {
			height: 70rpx;

			.btn-group {
				height: 60rpx;
				margin-top: 0rpx;
			}
		}
	}




	.gt-btn {
		width: 100rpx;
		height: 100%;

		.gt-btn-box {
			width: 70rpx;
			height: 70rpx;
			box-sizing: border-box;
			padding: 10rpx;
		}

		.btn-box {
			margin-top: 0rpx;
			margin-bottom: 0rpx;
			height: 40rpx;

			.btn-item {
				width: 80rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 20rpx;
			}
		}
	}




	.rank-icon {
		// width: 150rpx;
		flex: 1;
		height: 100%;

		.rank-icon-content {
			width: 60rpx;
			height: 60rpx;
		}


		.rank-icon-intro {
			// flex: 1;
			height: 100%;
			font-size: 20rpx;
			line-height: 20rpx;
			color: #5e5c5d;

			.rank-name {
				margin-bottom: 10rpx;
			}

			.rank-starts-icon {
				width: 30rpx;
				height: 30rpx;
			}

		}
	}

	.no-padding-bottom {
		padding-bottom: 10rpx !important;
	}
</style>